<template>
	<view>
    <!-- 自定义搜索组件 -->
    <view class="search-sticky">
      <shop-search @click="toGoodSearch"></shop-search>
    </view>
    <!-- 首页轮播图 -->
		<swiper 
      class="swiper-wrapper"
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="3000" 
      :duration="1000"
      :circular="true"
     >
		  <swiper-item
        v-for="item of swiperList"
        :key="item.goods_id"
      >
		    <navigator class="swiper-content-item" :url="'/subpkg/goods_list/goods_list?cid='+ item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
		  </swiper-item>
		</swiper>
    <!-- 分类导航图片 -->
    <view class="category">
      <navigator 
        class="category-content-item"
        v-for="(item, index) of categoryList"
        :key="index"
        :open-type="item.open_type ? item.open_type : 'navigate'"
        :url="item.navigator_url ? item.navigator_url : '/subpkg/goods_list/goods_list?query='+item.name"
      >
        <image :src="item.image_src" mode=""></image>
      </navigator>
    </view>
    <!-- 楼层信息 -->
    <view 
      class="floor"
      v-for="(item, index) of floorList"
      :key="index"
    >
      <image class="floor-title" :src="item.floor_title.image_src"></image>
      <view class="block-img-wrapper">
        <navigator 
          :url="item.product_list[0].navigator_url"
          class="left-banner">
          <image 
            :src="item.product_list[0].image_src" 
            :style="{width: item.product_list[0].image_width + 'rpx'}"
            mode="widthFix"
          ></image>
        </navigator>
        <view 
          class="right-img-box"
        >
          <navigator 
            class="img-item"
            v-for="(imgs, i) of item.product_list"
            :key="i"
            :url="imgs.navigator_url"
          >
            <image 
              v-if="i !== 0"
              :src="imgs.image_src"
              :style="{width: imgs.image_width + 'rpx'}"
              mode="widthFix"></image>
          </navigator>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import TabBarBadge from '../../mixins/tabbar-badge.js'
	export default {
    mixins: [TabBarBadge],
		data() {
			return {
         // 轮播图数据列表
         swiperList: [],
         // 分类数据列表
         categoryList: [],
         // 楼层数据列表
         floorList: []
			};
		},
    onLoad () {
      this.getSwiperList()
      this.getCategoryList()
      this.getFloorList()
    },
    methods: {
      // 定义获取轮播图数据的方法
      async getSwiperList () {
        const { data } = await uni.$http.get('/api/public/v1/home/swiperdata')
        if (data.meta.status !== 200) return uni.$showMsg()    
        // 请求成功，将数据赋值给data中轮播图数组swiperList
        this.swiperList = data.message
      },
      // 定义获取分类图片数据的方法
      async getCategoryList () {
        const {data} = await uni.$http.get('/api/public/v1/home/catitems')
        if(data.meta.status !== 200) return uni.$showMsg()
        // 请求成功，将数据赋值给data中分类数组categoryList
        this.categoryList = data.message
      },
      // 定义获取楼层信息数据的方法
      async getFloorList () {
        const { data } = await uni.$http.get('/api/public/v1/home/floordata')
        if (data.meta.status !== 200) return uni.$showMsg()
        //  处理跳转路径
        data.message.forEach(item => {
          item.product_list.forEach(itemImg => {
            itemImg.navigator_url = itemImg.navigator_url.replace(/pages/, 'subpkg/goods_list')
          })
        })
        // 请求成功，将数据赋值给data中楼层数组floorList
        this.floorList = data.message
      },
      // 跳转搜索页面
      toGoodSearch() {
        uni.navigateTo({
          url: '/subpkg/search_good/search_good'
        })
      }
    }
	}
</script>

<style lang="scss">
.search-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}
// 轮播图样式
.swiper-wrapper {
  height: 330rpx;
  .swiper-content-item,
  image {
    width: 100%;
    height: 100%;
  }
}
// 分类样式
.category {
  display: flex;
  justify-content: space-around;
  margin: 28rpx 0;
  width: 100%;
  .category-content-item {
    width: 128rpx;
    height: 140rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
// 楼层样式
.floor {
  .floor-title {
    height: 60rpx;
  }
  .block-img-wrapper {
    display: flex;
    padding:  0 10rpx;
    .left-banner {
      padding-right: 15rpx;
    }
    .right-img-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }
}

</style>
